<template>
  <pagination ref='cinemaPage' @loadMore='loadMore'>
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key='index'>{{item.name}}</div>
    </div>
  </pagination>
</template>
<script>
import axios from 'axios'
import Pagination from '~/pagination'
export default {
  data () {
    return {
      url: '/api/cinemas/', // 公网接口地址是： http://xieshi.vicp.io/myapi/cinemas/
      list: []
    }
  },
  components: {
    Pagination
  },
  mounted () {
    // this.getCinemas()
  },
  methods: {
    loadMore (page) {
      const url = this.url + (page.current)
      axios.get(url).then(res => {
        // 数据插入列表
        this.list = this.list.concat(res.data.data)
        // 通知分页组件，数据加载完毕
        this.$refs.cinemaPage.endUpScroll(res.data.page)
      }).catch(e => {

      })
    }
  }
}
</script>
<style lang="scss" scoped>
.list{
  .item{
    height: 100px;
    text-align: left;
    padding-left: 30px;
    line-height: 100px;
    border-bottom: 1px solid #ccc;
  }
}
</style>
